<template>
  <div>
    <div class="label flex flex-a-c mb-m">
      <div class="h-full text pl-10 font-bold">数据概览</div>
    </div>
    <div class="flex flex-wrap">
      <ms-data-card
        v-for="item in inviteCountData"
        :key="item.type"
        :title="item.name"
        :value="item.num"
        :style="3"
      ></ms-data-card>
    </div>
    <div class="label flex flex-a-c mb-m">
      <div class="h-full text pl-10 font-bold">邀请明细</div>
    </div>
    <InviteTable />
  </div>
</template>
<script setup>
import { userInviteCount } from '@/apis'
import InviteTable from './InviteTable.vue'

const route = useRoute()
const props = defineProps(['userId'])
const inviteCountData = ref([])

// 获取统计数据
const getUserInviteCount = async () => {
  const res = await userInviteCount({ id: route.query.id || props.userId })
  inviteCountData.value = res.data
}

setTimeout(() => {
  getUserInviteCount()
}, 1000)
</script>
